<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="demo.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>MatRobot</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
	<script src="jsmath/plugins/noImageFonts.js"></script>    
	<script src="jsmath/easy/load.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
	
	<div class="centered_div">
		<div class="main_header">
			<a href="index.html">
				<img class="logo1" src="matrobotlogo9.png"/>
				<img class="logo2" src="rightrobot5.png"/>
			</a>
		</div>
		<h4>Rozwiąż swoje każde zadanie!</h4>
		
		<div style='margin-top:20px;'>
			<div class="welcome_text">Rozwiąż równania matematyczne online. Zobacz kolejne działania 
			które po kolei przybliżą Cię do rozwiązania. Wybierz rodzaj zadania z menu, podaj wyrażenie 
			które chcesz uprościć, np. <span class='math'>2 x+\left(x+1\right) \left(3 x-1\right)</span> 
			i wciśnij przycisk 'Rozwiąż' - a zobaczysz kolejne kroki rozwiązania.</div>
		</div>
		 
		<table>
			<tr>
				<td style='vertical-align: top;'>
					<div class="menu_panel" style="clear: both;">
						<div class="menu_header" style=''>
							<img style="width:50px;float:left;" src="Crystal_Clear_app_package.png"/>
							<div class="menu_header_label"><span style='margin-left: 10px;'>Menu</span></div>
						</div>
						<div style="clear: both;"></div>
					
						<div class="menu_label">Wyrażenia algebraiczne</div>
						<table>
							<tr>
								<td><img style='width:30px;' src='Crystal_Clear_app_clean.png' /></td>
								<td>
									<div class="hyperlink_div">
										<a class='hyperlink' href='demo.html?type=upraszczanie'>Sprowadź do najprostszej postaci</a>
										Sprowadza dowolne wyrażenie typu <span class='math'>2 x+\left(x + 1\right) \left(3 x-1\right)</span> do
										najprostszej postaci.
									</div>
								</td>
							</tr>
							<tr>
								<td><img style='width:30px;' src='Crystal_Clear_app_clean.png' /></td>
								<td>
									<div class="hyperlink_div">
										<a href='demo.html?type=potegowanie'>Wykonaj potęgowanie</a>
										Oblicza wyrażenia podniesione do potęgi, takie jak
										<span class='math'>\left(x + 1\right)^2</span>
									</div>
								</td>
							</tr>
							<tr>
								<td><img style='width:25px;' src='Crystal_Clear_action_button_cancel.png' /></td>
								<td>
									<div class="hyperlink_div">
									Wkrótce będą dostępne kolejne rodzaje zadań. 
									</div>
								</td>
							</tr>
							
						</table>
					</div>
				</td>
				<td style='vertical-align: top;'>
					<div class="example_panel" style='margin-left:40px;'><!-- 2*x+(x+1)*(34/(7-8+2)) -->
						<div class="resolution_header" style='margin: 0px;'>
							<img style="width:50px;float:left;" src="Crystal_Clear_app_kedit.png"/>
							<div class="resolution_header_label"><span style='margin-left: 10px;'>Jak to wygląda?</span></div>
						</div>
						<div style="clear: both;">
						<div class='resolution_widget_description' style='margin: 30px 0px 0px 20px;'>1. Uprość następujące wyrażenie:</div>
						<div class='math' style='font-size:18px; font-weight: normal; font-style:italic; 
						text-align: left; margin: 5px 0px 15px 20px;'>2 x+\left(x+1\right) \left(\frac{3 4}{\left(7-8+2\right)}\right)</div>
						
						<div class='resolution_widget_description' style='margin: 20px 0px 0px 20px;'>2. Dodajemy wolne składniki</div>
						<div class='math' style='font-size:18px; font-weight: normal; font-style:italic; 
						text-align: left; margin: 5px 0px 15px 20px;'>2 x+\left(x+1\right) \left(\frac{3 4}{1}\right)</div>
						
						<div class='resolution_widget_description' style='margin: 20px 0px 0px 20px;'>3. Dzielimy możliwe składniki</div>
						<div class='math' style='font-size:18px; font-weight: normal; font-style:italic; 
						text-align: left; margin: 5px 0px 15px 20px;'>2 x+34\left(x+1\right)</div>
						</div>
						
						<div class='resolution_widget_description' style='margin: 20px 0px 0px 20px;'>4. Wymnażamy nawiasy</div>
						<div class='math' style='font-size:18px; font-weight: normal; font-style:italic; 
						text-align: left; margin: 5px 0px 15px 20px;'>2 x+34 x+34 * 1</div>
						
						<div class='resolution_widget_description' style='margin: 20px 0px 0px 20px;'>5. Mnożymy dostępne składniki</div>
						<div class='math' style='font-size:18px; font-	weight: normal; font-style:italic; 
						text-align: left; margin: 5px 0px 15px 20px;'>2x+34x+34</div>
						</div>
					</div>
				</td>
			</tr>
		</table>
		<div class='footer'>©2010 MatRobot.pl</div>			
	</div>

  </body>
</html>
